<template>
  <div class="message-list">
      <div class="warpper">
        <div class="list-content" v-for="item in tableData">
          <div class="content">
            <div class="content-left">
                <div class="title"><label :class="{'font-style': item.handler !== null}">{{item.type}}&nbsp&nbsp&nbsp&nbsp&nbsp</label><label :class="{'font-style': item.handler !== null}">{{item.createTime}}</label></div>
                <div class="content-text"><label :class="{'font-style': item.handler !== null}">{{item.title}}</label></div>
            </div>
            <div class="content-right">
                <div class="deal-content">
                    <el-button type="text" @click="messageState(item)" v-if="item.handler === null">未处理</el-button>
                    <label :class="{'font-style': item.handler !== null}" v-if="item.handler !== null">处理人: </label><label :class="{'font-style': item.handler !== null}">{{item.handler}}</label><br />
                    <label :class="{'font-style': item.handler !== null}" v-if="item.handler !== null">{{item.handlingTime}}</label>
                </div>
                <div class="time"></div>
            </div>
          </div>
        </div>
      </div>
      <el-form-item style="margin-top: 20px;">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="sendData.pageNo"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="sendData.pageSize"
              layout="total, prev , pager , next, sizes, jumper"
              :total="sendData.total">
          </el-pagination>    
      </el-form-item>  
  </div>
</template>
<script>
import {
  getMessageList,
  setMessageState,
  messageCount
} from "../../public/js/message";
export default {
  data() {
    return {
      tableData: [],
      ids: [],
      sendData: {
        pageNum: 1,
        pageSize: 10
      },
      stateTitle: "全部状态",
      search: ""
    };
  },
  created() {
    this.getMessageLists(this.sendData);
  },
  mounted() {
    window.bus.$on("backData", res => {
      this.tableData = res.messageEntities;
      this.total = res.total;
    });
  },
  methods: {
    getMessageLists() {
      getMessageList(this.sendData).then(res => {
        this.tableData = res.data.messageEntities;
        this.sendData.total = res.data.total;
        window.bus.$emit("allRead", {
          sendData: this.sendData,
          data: res.data.messageEntities
        });
      });
    },
    messageState(val) {
      this.ids = [];
      this.ids.push(val.id);
      setMessageState(this.sendData, this.ids).then(res => {
        if (res.data.errCode === 0) {
          this.$message.success("处理成功");
          this.tableData = res.data.messageEntities;
          if (val.typeI == 0) {
            this.$router.push("/index/order_detail?id=" + val.omcId);
          }
          if (val.typeI == 1) {
            this.$router.push("/index/list_goods_detail?id=" + val.omcId);
          }
          if (val.typeI == 2) {
            this.$router.push("/index/checkIn-detail?id=" + val.omcId);
          }
          messageCount().then(res => {
            if (res.data.errCode === 0)
              window.bus.$emit("messageCount", res.data.count);
          });
        }
      });
    },

    handleSizeChange(val) {
      this.sendData.pageSize = val;
      this.getMessageLists(this.sendData);
    },
    handleCurrentChange(val) {
      this.sendData.pageNum = val;
      this.getMessageLists(this.sendData);
    }
  }
};
</script>
<style lang="scss">
.message-list {
  .warpper {
    max-height: 550px;
    overflow: auto;
    .list-content {
      border-bottom: 1px solid #cdd9e6;
      .content {
        overflow: hidden;
        padding: 10px 20px;
      }
      .content-left,
      .content-right {
        float: left;
        width: 50%;
        line-height: 2;
        label,
        button {
          font-size: 12px;
        }
      }
      .content-left {
        text-align: left;
      }
      .content-right {
        text-align: right;
      }
    }
  }
  .font-style {
    color: rgb(182, 192, 201);
  }
}
</style>
